<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246); background-color: #545c64; width: 250px; overflow-x: hidden;
      border-top-left-radius: 20px;  border-bottom-left-radius: 20px;">
      <el-menu :default-openeds="[]" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
        style="width: 250px; height: 100vh;" :unique-opened="true">
        <h3 style="text-align: right; color: white; padding-right: 50px;">江淮虚EMS</h3>

        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>
            <router-link to="/mainShow" class="custom-show">
              首页
            </router-link>
          </template>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title"><i class="el-icon-message"></i>主数据</template>
          <el-menu-item index="2-1">
            <router-link to="/ProductManager" class="custom-link">
              物料产品管理
            </router-link>
          </el-menu-item>
          <el-menu-item index="2-2">
            <router-link to="/ProductCategory" class="custom-link">
              物料产品分类
            </router-link>
          </el-menu-item>
          <el-menu-item index="2-3">
            <router-link to="/UnitMeasure" class="custom-link">
              计量单位
            </router-link>
          </el-menu-item>

          <el-menu-item index="2-4">
            <router-link to="/customerManager" class="custom-link">
              客户管理
            </router-link>
          </el-menu-item>

          <el-menu-item index="2-5">
            <router-link to="/vendorManager" class="custom-link">
              供应商管理
            </router-link>
          </el-menu-item>
          <el-menu-item index="2-6">
            <router-link to="/workshop" class="custom-link">
              车间管理
            </router-link>
          </el-menu-item>
          <el-menu-item index="2-7">
            <router-link to="/workstation" class="custom-link">
              工作站
            </router-link>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title"><i class="el-icon-menu"></i>仓储管理</template>
          <el-menu-item index="3-1">
            <router-link to="/WmsUseList" class="custom-link">
              仓库设置
            </router-link>
          </el-menu-item>
          <el-menu-item index="3-2">库存现有量</el-menu-item>
          <el-menu-item index="3-3">
            <router-link to="/itemrecptList" class="custom-link">
              采购入库
            </router-link>
          </el-menu-item>
          <el-menu-item index="3-4">
            <router-link to="/WmArrList" class="custom-link">
              到货通知
            </router-link>
          </el-menu-item>
          <el-menu-item index="3-4">供应商退货</el-menu-item>
          <el-menu-item index="3-5">生产领料</el-menu-item>
          <el-menu-item index="3-6">生产退料</el-menu-item>
          <el-menu-item index="3-7">产品入库</el-menu-item>
          <el-menu-item index="3-8">销售出库</el-menu-item>
          <el-menu-item index="3-9">转移调拨</el-menu-item>
          <el-menu-item index="3-10">赋码管理</el-menu-item>
          <el-menu-item index="3-11">装箱管理</el-menu-item>
          <el-menu-item index="3-12">SN码</el-menu-item>
          <el-menu-item index="3-13">库存盘点</el-menu-item>
          <el-menu-item index="3-14">
            <router-link to="/WmsOutList" class="custom-link">
                        外协发料
            </router-link>
          </el-menu-item>
          <el-menu-item index="3-15">外协入库</el-menu-item>
        </el-submenu>



        <el-submenu index="4">
          <template slot="title"><i class="el-icon-menu"></i>设备管理</template>
          <el-menu-item index="4-1">设备类型设置</el-menu-item>
          <el-menu-item index="4-2">设备台账</el-menu-item>
          <el-menu-item index="4-3">点检保养项目</el-menu-item>
          <el-menu-item index="4-4">点检保养计划</el-menu-item>
          <el-menu-item index="4-5">维修单</el-menu-item>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title"><i class="el-icon-menu"></i>工装夹具管理</template>
          <el-menu-item index="5-1">
          <router-link to="/toolType" class="custom-link">
            类型设置
          </router-link>
          </el-menu-item>
          <el-menu-item index="5-2">
          <router-link to="/tool" class="custom-link">
            工装夹具台账
          </router-link>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title"><i class="el-icon-menu"></i>生产管理</template>
          <el-menu-item index="6-1">生产工单</el-menu-item>
          <el-menu-item index="6-2">工序设置</el-menu-item>
          <el-menu-item index="6-3">工艺流程</el-menu-item>
          <el-menu-item index="6-4">生产排产</el-menu-item>
          <el-menu-item index="6-5">生产报工</el-menu-item>
        </el-submenu>

        <el-submenu index="7">
          <template slot="title"><i class="el-icon-menu"></i>质量管理</template>
          <el-menu-item index="7-1">常见缺陷</el-menu-item>
          <el-menu-item index="7-2">检测项设置</el-menu-item>
          <el-menu-item index="7-3">检测模板</el-menu-item>
          <el-menu-item index="7-4">待检任务</el-menu-item>
          <el-menu-item index="7-5">来料检验</el-menu-item>
          <el-menu-item index="7-6">过程检验</el-menu-item>
          <el-menu-item index="7-7">出货检验</el-menu-item>
        </el-submenu>

        <el-submenu index="8">
          <template slot="title"><i class="el-icon-menu"></i>排班管理</template>
          <el-menu-item index="8-1">班组设置</el-menu-item>
          <el-menu-item index="8-2">排班计划</el-menu-item>
          <el-menu-item index="8-3">节假日设置</el-menu-item>
          <el-menu-item index="8-4">排班日历</el-menu-item>
          <el-menu-item index="8-5">节假日设置</el-menu-item>
          <el-menu-item index="8-6">排班日历</el-menu-item>
        </el-submenu>

        <el-submenu index="9">
          <template slot="title"><i class="el-icon-menu"></i>报表管理</template>
          <el-menu-item index="9-1">报表清单</el-menu-item>
          <el-menu-item index="9-2">报表设计</el-menu-item>
        </el-submenu>


      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">

        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: large; margin-top: 20px;">
                <el-breadcrumb-item v-for="(item, index) in breadCrumbs" :key="index"
                  :to="item.path ? { path: item.path } : null">
                  {{ item.meta.title }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-dropdown style="font-size: large; padding-top: 0px;">
                <span>{{user.username}}</span>
                <i class="el-icon-setting"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>布局设置</el-dropdown-item>
                  <el-dropdown-item @click.native="loginout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>







      </el-header>

      <el-main class="mainShow">

        <router-view />

      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { computed } from 'vue';


export default {
  data(){
    return{
      user:{
        userId:'',
        username:'',
        nickName:'',
        userType:'',
        email:'',
        phonenumber:'',
        sex:'',
        avatar:'',
        status:'',
        delFlag:'',
        loginIp:'',
        loginDate:'',
        remark:'',
        roleId:'',
      }
    }
  },
  name: 'Main',
  computed: {
    breadCrumbs() {
      return this.$route.matched.filter(record => record.meta && record.meta.title);
    }
  },
  mounted(){
    this.loginInfo();
  },
  methods: {
    loginInfo() {
      this.$axios.get('http://localhost:9970/emsSystem/api/user/info').then(res => {
        if (res.data.code == 200) {
          this.user=res.data.data
          this.$store.dispatch('asyncUpdateUser', { userLoginInfo: res.data.data })
        }
      })
    },
    loginout() {
      this.$axios.post('http://localhost:9970/emsSystem/api/logout').then(res => {
        if (res.data.code == 200) {
          this.$message.success('退出成功');
          localStorage.removeItem('dlyk_token');
          this.$router.push('/');
        } else {
          this.$message.error(res.data.msg);
        }
      })
    }
  }
};
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
  height: 100%;
}

.el-aside {
  color: #333;
}

.mainShow {
  background-color: rgb(246, 244, 244);
}

.el-table {
  background-color: white;
  border-radius: 20px;
}

/* .el-table__cell {
  background-color: white !important;
}

.cell {
  background-color: white;
}

tr {
  background-color: white;
} */

.el-menu-item {
  background-color: #474e56 !important;
}

.custom-link {
  color: white;
  text-decoration: none;
  font-size: 15px;
}

.el-submenu .el-submenu__title {
  font-size: medium;
  /* 主数据标题的字体大小 */
}

.custom-show {
  color: white;
  text-decoration: none;
  font-size: medium;
}

/* .el-table th {
  font-size: 20px;
  color: #646464;
}

} */
.el-breadcrumb__separator {
  color: #363636;
}

</style>
